<link href="/assets/libs/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">
<style>
    .profile-avatar-container {
        position:relative;
        width:100px;
    }
    .profile-avatar-container .profile-user-img{
        width:100px;
        height:100px;
    }
    .profile-avatar-container .profile-avatar-text {
        display:none;
    }
    .profile-avatar-container:hover .profile-avatar-text {
        display:block;
        position:absolute;
        height:100px;
        width:100px;
        background:#444;
        opacity: .6;
        color: #fff;
        top:0;
        left:0;
        line-height: 100px;
        text-align: center;
    }
    .profile-avatar-container button{
        position:absolute;
        top:0;left:0;width:100px;height:100px;opacity: 0;
    }
</style>
<div id="content-container" class="container" style="margin-top: 50px;">
    <div class="row">
        <div class="col-md-3">
            {include file="common/sidenav" /}
        </div>
        <div class="col-md-9">
            <div class="panel panel-default">
                <div class="panel-body">
                    <h2 class="page-header">{:__('Profile')}</h2>
                    <form id="profile-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="{:url('api/user/profile')}">
                        {:token()}

                        <div class="form-group">
                            <label for="c-sendpic" class="control-label col-xs-12 col-sm-2"><span style="color: red;">*</span>{:__('Avatar')}:</label>
                            <div class="col-xs-12 col-sm-6">
                                <div class="input-group">
                                    <input id="c-sendpic" data-rule="" class="form-control" size="50" name="avatar" type="text" value="{$user.avatar}">
                                    <div class="input-group-addon no-border no-padding">
                                        <span><button type="button" id="faupload-sendpic" class="btn btn-danger faupload" data-input-id="c-sendpic" data-maxcount="5" data-maxsize="6mb" data-mimetype="jpeg,png,jpg" data-multiple="false" data-preview-id="p-sendpic"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                                    </div>
                                    <span class="msg-box n-right" for="c-sendpic"></span>
                                </div>
                                <ul class="row list-inline faupload-preview" id="p-sendpic">
                                    {if condition="(empty($user['avatar']) neq true)" }
                                    <li class="col-xs-3">
                                        <a href="{$user.avatar}" data-url="{$user.avatar}" target="_blank" class="thumbnail">
                                            <img src="{$user.avatar}"  class="img-responsive">
                                        </a>
                                        <a href="javascript:;" class="btn btn-danger btn-xs btn-trash"><i class="fa fa-trash"></i></a>
                                    </li>
                                    {/if}
                                </ul>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2"><span style="color: red;">*</span>{:__('Username')}:</label>
                            <div class="col-xs-12 col-sm-6">
                                <input type="text" class="form-control" id="username" name="" disabled value="{$user.username|htmlentities}" data-rule="" placeholder="" >
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2"><span style="color: red;">*</span>{:__('Name_en')}:</label>
                            <div class="col-xs-12 col-sm-6">
                                <input type="text" class="form-control" id="nickname_en" name="nickname_en" value="{$user.nickname_en|htmlentities}" data-rule="required" placeholder=""  onblur="checkName('nickname_en',16)">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-xs-12 col-sm-2"><span style="color: red;">*</span>{:__('Name')}:</label>
                            <div class="col-xs-12 col-sm-6">
                                <input type="text" class="form-control" id="nickname" name="nickname" value="{$user.nickname|htmlentities}" data-rule="" placeholder="" onblur="checkName('nickname',16)">
                            </div>
                        </div>



                        <div class="form-group">
                            <label for="c-email" class="control-label col-xs-12 col-sm-2"><span style="color: red;">*</span>{:__('Mobile')}:</label>
                            <div class="col-xs-12 col-sm-6">
                                <input type="number" class="form-control" id="mobile" name="mobile" value="{$user.mobile|htmlentities}" data-rule="required" placeholder=""  onblur="checkName('mobile',16)">

                            </div>
                        </div>
                        <div class="form-group">
                            <label for="birthday" class="control-label col-xs-12 col-sm-2">{:__('birthday')}:</label>
                            <div class="col-xs-12 col-sm-6">
                                <input type='text' class="form-control"  id="myDatetimepicker" name="birthday" autocomplete="" value="{$user.birthday ?: ''}" />
<!--                                <input type='text' class="form-control datetimepicker" data-rule="required" id="birthday" name="birthday"   data-date-format="YYYY-MM-DD" autocomplete="" value="{$user.birthday ?: ''}"  />-->
                            </div>
                        </div>



                        <div class="form-group normal-footer">
                            <label class="control-label col-xs-12 col-sm-2"></label>
                            <div class="col-xs-12 col-sm-8">
                                <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('Ok')}</button>
                                <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="c-mobile" class="control-label col-xs-12 col-sm-2"></label>
                            <div class="col-xs-12 col-sm-4">
                                {:__('xing_tip')}
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="emailtpl">
    <form id="email-form" class="form-horizontal form-layer" method="POST" action="{:url('api/user/changeemail')}">
        <div class="form-body">
            <input type="hidden" name="action" value="changeemail" />
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-3">{:__('New Email')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <input type="text" class="form-control" id="email" name="email" value="" data-rule="required;email;remote({:url('api/validate/check_email_available')}, event=changeemail, id={$user.id})" placeholder="{:__('New email')}">
                    <span class="msg-box"></span>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-3">{:__('Captcha')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <div class="input-group">
                        <input type="text" name="captcha" id="email-captcha" class="form-control" data-rule="required;length({$Think.config.captcha.length});digits;remote({:url('api/validate/check_ems_correct')}, event=changeemail, email:#email)" />
                        <span class="input-group-btn" style="padding:0;border:none;">
                            <a href="javascript:;" class="btn btn-info btn-captcha" data-url="{:url('api/ems/send')}" data-type="email" data-event="changeemail">获取验证码</a>
                        </span>
                    </div>
                    <span class="msg-box"></span>
                </div>
            </div>
        </div>
        <div class="form-footer">
            <div class="form-group" style="margin-bottom:0;">
                <div class="col-xs-12 col-sm-8 col-sm-offset-3">
                    <button type="submit" class="btn btn-md btn-primary">{:__('Submit')}</button>
                </div>
            </div>
        </div>
    </form>
</script>
<script type="text/html" id="mobiletpl">
    <form id="mobile-form" class="form-horizontal form-layer" method="POST" action="{:url('api/user/changemobile')}">
        <div class="form-body">
            <input type="hidden" name="action" value="changemobile" />
            <div class="form-group">
                <label for="c-mobile" class="control-label col-xs-12 col-sm-3">{:__('New mobile')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <input type="text" class="form-control" id="mobile" name="mobile" value="" data-rule="required;mobile;remote({:url('api/validate/check_mobile_available')}, event=changemobile, id={$user.id})" placeholder="{:__('New mobile')}">
                    <span class="msg-box"></span>
                </div>
            </div>
            <div class="form-group">
                <label for="mobile-captcha" class="control-label col-xs-12 col-sm-3">{:__('Captcha')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <div class="input-group">
                        <input type="text" name="captcha" id="mobile-captcha" class="form-control" data-rule="required;length({$Think.config.captcha.length});digits;remote({:url('api/validate/check_sms_correct')}, event=changemobile, mobile:#mobile)" />
                        <span class="input-group-btn" style="padding:0;border:none;">
                            <a href="javascript:;" class="btn btn-info btn-captcha" data-url="{:url('api/sms/send')}" data-type="mobile" data-event="changemobile">获取验证码</a>
                        </span>
                    </div>
                    <span class="msg-box"></span>
                </div>
            </div>
        </div>
        <div class="form-footer">
            <div class="form-group" style="margin-bottom:0;">
                <div class="col-xs-12 col-sm-8 col-sm-offset-3">
                    <button type="submit" class="btn btn-md btn-primary">{:__('Submit')}</button>
                </div>
            </div>
        </div>
    </form>
</script>
<style>
    .form-layer {height:100%;min-height:150px;min-width:300px;}
    .form-body {
        width:100%;
        overflow:auto;
        top:0;
        position:absolute;
        z-index:10;
        bottom:50px;
        padding:15px;
    }
    .form-layer .form-footer {
        height:50px;
        line-height:50px;
        background-color: #ecf0f1;
        width:100%;
        position:absolute;
        z-index:200;
        bottom:0;
        margin:0;
    }
    .form-footer .form-group{
        margin-left:0;
        margin-right:0;
    }
    .daterangepicker select.monthselect {
        color: #474545 !important;
    }
    .daterangepicker select.yearselect {
        color: #474545 !important;
    }
    .daterangepicker .calendar th, .daterangepicker .calendar td {
        color: #222 !important;
    }
</style>
<!--<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>-->
<script src="/assets/libs/bootstrap-daterangepicker/moment.min.js"></script>
<script src="/assets/libs/bootstrap-daterangepicker/daterangepicker.js"></script>
<script>
    $(function (){
        $('#myDatetimepicker').daterangepicker({
                singleDatePicker: true,
                showDropdowns:true,
                minDate: moment('1900-01-01'), // 设置最小年份
                endDate: moment(new Date()),
                maxDate: moment(new Date()),//设置最大日期
                startDate: '{$user.birthday ?: $start_time}',
                locale: {
                    format: "YYYY-MM-DD", //设置显示格式
                    applyLabel: '确定', //确定按钮文本
                    cancelLabel: '清除', //取消按钮文本
                    firstDay: 1
                },
            },
            function(start) {
                $('#myDatetimepicker span').html(start.format('YYYY-MM-DD'));
            }
        );
    })
    function checkName(key,length){
        var value = $("#"+key).val();
        if(value.length > length){
            var the_name = "name"
            if(key == 'mobile'){
                 the_name  = __('mobile');
            }
            if(key == 'nickname_en'){
                 the_name  = __('Name_en');
            }
            if(key == 'nickname'){
                 the_name  = __('Name_zh');
            }
            Layer.msg(__('name_length',the_name,16))
        }
    }
</script>
